<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.6.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        //初始化省市的值
        var provinces = ["黑龙江","辽宁","吉林"]
        var cities = [["哈尔滨","齐齐哈尔","大庆"],["沈阳","大连","本溪"],["长春","四平","德惠"]]

        $(function () {
            //初始化省和市
            var initOp = $("<option value='0'>--请选择--</option>");
            initOp.appendTo("select");

            //加载所有省份
            $.each(provinces,function (index,value){
               var province = $("<option value='"+(index+1)+"'>"+value+"</option>");
               $("#province").append(province);
            });

            //个省份的下拉列表绑定 change事件
            $("#province").change(function (){

                //清空原有城市列表
                $("#city").empty();

                //获取当前省份的value值
                var proId = $(this).val();

                //如果为 1，城市追加请选择
                if(proId == 0){
                    $("#city").append($("<option>--请选择--</option>"))
                }else{
                    //获取相应省份的城市列表
                    var proCities = cities[proId-1];

                    //遍历城市列表并追加到城市 select
                    $.each(proCities,function (index,value){
                        var city = $("<option>"+value+"</option>");
                        $("#city").append(city);
                    })
                }



            })
        });

    </script>
</head>
<body>

  <select id="province"></select>省
  <select id="city"></select>市

</body>
</html>